import { useIntersectionObserver } from '@vueuse/core'
// 定义懒加载插件
export const lazyPlugin = {
    // 插件对象
    install(app) {
        // 懒加载指令
        app.directive('img-lazy', {
            mounted(el, binding) {
                // el指的是绑定的那个元素img
                // binding:binding.value 指令等于后边绑定的表达式的值   图片url
                const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
                    // isIntersecting:是否进入视口区域
                    if (isIntersecting) {
                        // 进入视口区域
                        el.src = binding.value
                        stop()
                    }
                },
                )
            }
        })
    }
}